<script setup lang="ts">
import { computed, ref } from 'vue';
import { useHomeStore } from '@/stores/homeStore';
import { formatNumber } from '@/utils/common';

// 定义 props
const props = defineProps({
    open: {
        type: Boolean,
        required: true,
        default: false
    }
});

// 定义 emit
const emit = defineEmits(['onClose', 'onOpenReview']);

// store 数据存储
const homeStore = useHomeStore();
const cart = computed(() => homeStore.cart);
const cartItemCount = computed(() => homeStore.cartItemCount);
const cartTotal = computed(() => homeStore.cartTotal);

const onClose = () => {
    emit('onClose');
};

const is_defray = ref(true);
const increment = (dishId: string, quantity: number) => {
    homeStore.updateQuantity(dishId, (quantity += 1));
};
const decrement = (dishId: string, quantity: number) => {
    quantity > 1 ? homeStore.updateQuantity(dishId, (quantity -= 1)) : homeStore.removeFromCart(dishId);
};

const onCartClear = () => {
    homeStore.clearCart();
};

const onReview = () => {
    emit('onOpenReview')
}
</script>

<template>
    <a-drawer :placement="'right'" :width="776" :closable="false" :open="open" destroyOnClose @close="onClose">
        <div class="flex h-full w-full flex-col">
            <h2 class="mb-6 text-xl leading-8 font-semibold text-white">10番テーブル</h2>
            <div class="relative flex w-full flex-1 flex-col bg-center text-white">
                <!-- :style="{ backgroundImage: `url('/images/cart-bg.png')`, transform: !is_defray ? 'rotateY(180deg)' : 'rotateY(0deg)', backgroundSize: '100% 100%' }" -->
                <img
                    class="absolute z-0 h-full w-full object-contain"
                    :style="{ transform: is_defray ? 'rotateY(180deg)' : 'rotateY(0deg)' }"
                    src="/images/cart-bg.png"
                    alt="background"
                />
                <!-- <div class class="/images/cart-bg.png"></div> -->
                <div class="relative z-10 flex h-24 shrink-0 items-center px-2 text-2xl">
                    <p class="flex-1 py-5 text-center" @click="is_defray = false">料理を追加</p>
                    <p class="flex-1 py-5 text-center" @click="is_defray = true">注文済み</p>
                </div>
                <div
                    class="relative z-10 mx-auto mt-4 flex w-[calc(100%-40px)] shrink-0 items-center justify-between border-b border-dashed border-[#D6F1F6] pb-6"
                >
                    <span>合計{{ cartItemCount }}食</span>
                    <a-button v-show="is_defray" class="btn-bg-gradient !h-12 !rounded-lg !text-lg" type="primary" @click="onReview">評価</a-button>
                    <div v-show="!is_defray" class="flex h-12 items-center gap-4">
                        <a-button class="!text-lg !leading-none" type="text">
                            <template #icon>
                                <i class="fantec_font ft_Refresh !text-2xl leading-none"></i>
                            </template>
                            更新
                        </a-button>
                        <a-button class="!text-lg !leading-none" type="text" @click="onCartClear">
                            <template #icon>
                                <i class="fantec_font ft_Delete !text-2xl leading-none"></i>
                            </template>
                            クリア
                        </a-button>
                    </div>
                </div>
                <div class="relative z-10 flex max-h-[calc(100vh-400px)] w-full flex-1 flex-col gap-9 overflow-auto px-5 py-9">
                    <div v-for="{ dish, quantity } in cart" :key="dish.id" class="flex gap-2.5">
                        <img class="h-[68px] w-[90px] shrink-0 rounded-xl object-cover" :src="dish.cover_image" alt="" />
                        <div class="flex-1">
                            <p class="text-lg">{{ dish.name }}</p>
                            <p class="text-sm text-[#C4C4C4]">{{ dish.introduction }}</p>
                        </div>
                        <div class="flex shrink flex-col items-end justify-center">
                            <p class="text-lg"><span class="mr-1 text-sm">¥</span>{{ formatNumber(dish.price) }}</p>
                            <p v-show="is_defray">*{{ quantity }}</p>
                            <div v-show="!is_defray" class="flex items-center">
                                <i
                                    class="fantec_font ft_MinusCircle text-xl leading-none text-[#A0A0A0]"
                                    @click="decrement(dish.id, quantity)"
                                ></i>
                                <p class="min-w-10 px-2.5 text-center leading-5">{{ quantity }}</p>
                                <i
                                    class="fantec_font ft_PlusCircle text-xl leading-none text-[#E7323C]"
                                    @click="increment(dish.id, quantity)"
                                ></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="relative right-0.5 bottom-1 z-10 ml-auto flex h-[86px] w-fit min-w-[465px] items-center gap-4 rounded-tl-2xl rounded-br-2xl bg-[#00000066] px-5 backdrop-blur-lg"
                >
                    <template v-if="is_defray">
                        <a-badge
                            :count="cartItemCount"
                            :number-style="{
                                color: '#fff',
                                fontSize: '16px',
                                top: '6px',
                                insetInlineEnd: '-16px',
                                boxShadow: '0 0 #0000'
                            }"
                        >
                            <p class="flex items-center text-4xl font-semibold">
                                <span class="mr-1 text-base">¥</span>{{ formatNumber(cartTotal) }}
                            </p>
                        </a-badge>
                    </template>
                    <template v-if="!is_defray">
                        <a-badge
                            :count="cartItemCount"
                            :number-style="{
                                color: '#fff',
                                fontSize: '16px',
                                top: '6px',
                                insetInlineEnd: '4px',
                                boxShadow: '0 0 #0000'
                            }"
                        >
                            <div class="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#7D7D7D91]">
                                <i class="fantec_font ft_ShopCart !text-[28px] leading-none" />
                            </div>
                        </a-badge>
                        <p class="flex items-center text-4xl font-semibold">
                            <span class="mr-1 text-base">¥</span>{{ formatNumber(cartTotal) }}
                        </p>
                    </template>
                    <a-button
                        type="primary"
                        class="ml-auto !h-12 !rounded-xl !px-5 !text-lg !text-white"
                        :class="cartItemCount === 0 ? 'btn-bg-gradient-disabled' : 'btn-bg-gradient'"
                        :disabled="cartItemCount === 0"
                    >
                        {{ cartItemCount > 0 ? '今すぐ注文' : '商品を選択してください' }}
                    </a-button>
                    <!-- btn-bg-gradient   btn-bg-gradient-disabled   -->
                    <!-- <a-button class="btn-bg-gradient-disabled !h-12 !rounded-xl !px-5 !text-lg !text-white" type="primary" disabled>
                        商品を選択してください
                    </a-button> -->
                </div>
            </div>
        </div>
    </a-drawer>
</template>
